<template>
  <!-- <a-card></a-card> -->
  <page-header />
  <div class="screen-outer">
    <div class="screen-left">
      <div class="screen-left__video">
        <video class="screen-left__video" controls :src="videoDetail.videoUrl"></video>
        <div class="video-ctx">
          <p class="video-title">{{ videoDetail?.title }}</p>
          <div class="video-info">
            <p style="marginright: 24px">{{ videoDetail?.playNum }}次</p>
            <p>{{ videoDetail?.data }} {{ videoDetail?.time }}</p>
          </div>
          <div class="video-btn__outer">
            <div class="video-btn" @click="handleLike">
              <icon-font :type="isLike ? 'icon-like-fill' : 'icon-like'" :size="24"></icon-font>
              <span class="video-btn__text">{{ videoDetail?.markNum }}</span>
            </div>
            <div class="video-btn" @click="handleShare">
              <icon-font type="icon-share" :size="24"></icon-font>
              <span class="video-btn__text">{{ videoDetail?.collectNum }}</span>
            </div>
            <div class="video-btn video-btn-gray">
              <icon-font type="icon-edit-square" :size="24"></icon-font>
              <span class="video-btn__text">{{ videoDetail?.editNum }}</span>
            </div>
          </div>
        </div>
        <p class="course-title">课程信息</p>
        <p class="course-intro tit">简介：</p>
        <p class="course-intro">
          <span class="course-intro__text">{{ videoDetail?.paragraph }}</span>
        </p>
        <p class="course-intro">
          <span>教师：</span>
          <span class="course-intro__text">{{ videoDetail?.teacher }}</span>
        </p>
        <p class="course-intro">
          <span>教室：</span>
          <span class="course-intro__text">{{ videoDetail?.classRoom }}</span>
        </p>
        <p class="course-intro">
          <span>班级：</span>
          <span class="course-intro__text">{{ videoDetail?.className }}</span>
        </p>
      </div>
    </div>
    <div class="screen-right">
      <!-- 课堂情况 -->
      <div class="screen-right__title">
        <p>课堂情况</p>
        <p class="screen-title__text" @click="arrowActive1 = !arrowActive1">
          <span>{{ arrowActive1 ? '收起' : '展开' }}</span>
          <icon-font :type="arrowActive1 ? 'icon-up' : 'icon-down'"></icon-font>
        </p>
      </div>
      <div class="screen-right__ctx" :class="{ 'screen-right__ctx--ellpsis': !arrowActive1 }">
        <div class="screen-right__text screen-right__flex">
          <p>应到人数{{ queryParams?.totalNum }}人</p>
        </div>
        <div class="screen-right__text screen-right__flex">
          <p>实到人数</p>
          <div v-if="isEdit">
            <a-input-number :min="0" v-model:value="queryParams.humanNum" />
          </div>
          <p v-else class="right-text">{{ queryParams.humanNum }}</p>
        </div>
        <div class="screen-right__text screen-right__flex">
          <p>迟到早退人数</p>
          <div v-if="isEdit">
            <a-input-number :min="0" v-model:value="queryParams.lateNum" />
          </div>
          <p v-else class="right-text">{{ queryParams.lateNum }}</p>
        </div>
      </div>
      <!-- 教师情况 -->
      <div class="screen-right__title">
        <p>教师情况</p>
        <p class="screen-title__text" @click="arrowActive2 = !arrowActive2">
          <span>{{ arrowActive2 ? '收起' : '展开' }}</span>
          <icon-font :type="arrowActive2 ? 'icon-up' : 'icon-down'"></icon-font>
        </p>
      </div>
      <div class="screen-right__ctx" :class="{ 'screen-right__ctx--ellpsis': !arrowActive2 }">
        <div class="screen-right__text" v-for="item in queryParams.teacherList" :key="item.id">
          <p>{{ item.paragraph }}</p>
          <div v-if="isEdit">
            <a-slider :marks="marks" v-model:value="item.score" :disabled="!isEdit" />
          </div>
          <div class="score-layout" v-else>
            <div class="score-scale">
              <div
                class="score-scale--progress"
                :style="{ width: (item.score / 100) * 250 + 'px' }"
              ></div>
            </div>
            <p class="right-text">{{ item.score }}</p>
          </div>
        </div>
      </div>
      <!-- 学生情况 -->
      <div class="screen-right__title">
        <p>学生情况</p>
        <p class="screen-title__text" @click="arrowActive3 = !arrowActive3">
          <span>{{ arrowActive3 ? '收起' : '展开' }}</span>
          <icon-font :type="arrowActive3 ? 'icon-up' : 'icon-down'"></icon-font>
        </p>
      </div>
      <div class="screen-right__ctx" :class="{ 'screen-right__ctx--ellpsis': !arrowActive3 }">
        <div class="screen-right__text" v-for="item in queryParams.studentList" :key="item.id">
          <p class="pdb-12">{{ item.paragraph }}</p>
          <div v-if="isEdit">
            <a-radio-group v-model:value="item.level" size="large" style="width: 100%">
              <a-radio-button value="A">等级 A</a-radio-button>
              <a-radio-button value="B">等级 B</a-radio-button>
              <a-radio-button value="C">等级 C</a-radio-button>
            </a-radio-group>
          </div>
          <div class="right-radioGroup" v-else>等级 {{ item.level }}</div>
        </div>
      </div>
      <div class="screen-right__title">
        <p>点评与建议</p>
        <p class="screen-title__text" @click="arrowActive4 = !arrowActive4">
          <span>{{ arrowActive4 ? '收起' : '展开' }}</span>
          <icon-font :type="arrowActive4 ? 'icon-up' : 'icon-down'"></icon-font>
        </p>
      </div>
      <div class="screen-right__ctx" :class="{ 'screen-right__ctx--ellpsis': !arrowActive4 }">
        <div class="screen-right__text" v-if="isEdit">
          <a-textarea
            v-model:value="queryParams.suggest"
            placeholder="点此输入总体评价"
            :rows="4"
          />
        </div>
        <div class="screen-right__text" v-else>{{ queryParams.suggest }}</div>
        <div class="screen-right__text" v-if="isEdit">
          <a-textarea v-model:value="queryParams.comment" placeholder="点此输入建议" :rows="4" />
        </div>
        <div class="screen-right__text" v-else>{{ queryParams.comment }}</div>
      </div>
      <!-- 底部按钮 -->
      <div class="screen-right__bottom">
        <div class="button-edit" v-if="isEdit">
          <a-button type="link" class="font999" @click="isEdit = false">退出</a-button>
          <a-button size="large" type="primary" @click="submit">提交</a-button>
        </div>
        <div class="bottom-btn__right" v-else>
          <a-button size="large" type="primary" v-if="isNotEvaluate">开始评课</a-button>
          <a-button size="large" v-else @click="isEdit = true">修改</a-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
  import { defineComponent, reactive, toRefs, ref, onMounted } from 'vue'
  import { DynamicTable, TableQueryHeader } from '@/components/dynamic-table'
  import { useRoute } from 'vue-router'
  import { useStore } from '@/store'
  import PageHeader from '@/layout/header/index.vue'
  import { IconFont } from '@/components/iconfont'
  import { getVideoDetail, getEvaluateDetail, setEvaluate } from '@/api/screen'
  import { isDeep } from '@/utils/is'
  import { copyText } from '@/utils/common'
  import { message } from 'ant-design-vue'

  export default defineComponent({
    name: 'Markcomponent',
    components: {
      PageHeader,
      IconFont,
    },
    setup() {
      const tableRef = ref<InstanceType<typeof DynamicTable>>()

      const valueDate = ref<moment.Moment[]>([])

      const route = useRoute()

      const store = useStore()

      const marks = ref<Record<number, any>>({
        0: '0',
        100: '100',
      })

      const state = reactive({
        isLike: false, // 是否点赞
        isEdit: false, // 是否编辑过课程
        arrowActive1: true,
        arrowActive2: true,
        arrowActive3: true,
        arrowActive4: true,
        videoDetail: {} as any,
        isNotEvaluate: false, // 是否评课
        queryParams: {
          comment: null,
          suggect: null,
          humanNum: 0,
          lateNum: 0,
        } as any,
      })

      /**
       * @description 加载表格数据
       */

      onMounted(async () => {
        const res = await getVideoDetail({ id: route.query.id })
        state.videoDetail = res
        getEvaluate()
      })

      const getEvaluate = async () => {
        const res = await getEvaluateDetail({ id: route.query.id })
        state.isNotEvaluate = false
        if (!res) {
          state.isNotEvaluate = true
          return
        }
        state.queryParams = res
      }

      const submit = async () => {
        const params = isDeep(state.queryParams)
        // 处理参数逻辑写这里
        // todo start
        // todo end
        await setEvaluate(params)
        state.isEdit = false
        getEvaluate()
      }
      // 点赞
      const handleLike = async () => {
        state.isLike = !state.isLike
      }
      // 分享
      const handleShare = async () => {
        const text = state.videoDetail?.videoUrl
        copyText(text).then((res) => {
          message.success('链接已复制')
        })
      }

      return {
        ...toRefs(state),
        tableRef,
        marks,
        submit,
        handleLike,
        handleShare,
      }
    },
  })
</script>
<style lang="scss" scoped>
  @import './screen.scss';
</style>
